<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script th:src="@{/js/jquery.min.js}"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
        }

        .div {
            text-align: center;
            margin: 0 auto;
            border: black solid 1px;
            width: 80%;
            height: 80%;
        }

        table {
            width: 100%;
            font-size: 15px;
        }

        tr {
            height: 40px;
        }

        div {
            text-align: center;
        }

        input[type="button"] {
            height: 15%;
            border: 2px solid #545454;
            border-radius: 5px;
            padding: 3px 6px;
            width: 40%;
            font-size: 20px;
            margin-bottom: 9px;

        }
    </style>
</head>
<body>
<div class="div">


    <h3 style="text-align: center">出空托盘</h3>
    <hr>
    <div style="display: inline-block;margin: auto 0">
        <table>
            <tr style="width: 100%">
                <td align="right">
                    <label style="width: 100%;">空托盘类型：</label>
                </td>
                <td align="left">
                    <select id="type" name="type" style="width:150px;height: 25px">
                        <option value="1">轻载货位托盘</option>
                        <option value="2">重载货位托盘</option>
                    </select>
                </td>
            </tr>
            <tr style="width: 100%">
                <td align="right">
                    <label style="width: 100%;">出口：</label>
                </td>
                <td align="left">
                    <select id="exit" name="type" style="width:150px;height: 25px">
                        <option value="302">轻载1号口</option>
                        <option value="301">轻载2号口</option>
                        <option value="303">轻载3号口</option>
                        <option value="312">重载1号口</option>
                        <option value="313">重载3号口</option>
                    </select>
                </td>
            </tr>
            <tr style="width: 100%">
                <td align="right">
                    <label style="width: 100%;">数量：</label>
                </td>
                <td align="left">
                    <input type="text" id="quantity">
                </td>
            </tr>

        </table>
    </div>
    <div style="margin-top: 10px">
        <input style="width: 10%;font-size: large" type="button" onclick="saveOutJob()" id="submitbut" value="提交"/>
    </div>

</div>

</body>
<script>
    function saveOutJob() {
        var type = document.getElementById("type").value;
        var exit=document.getElementById("exit").value;
        var quantity=document.getElementById("quantity").value;
        if(type=="1" &&exit !=301 && exit !=302 && exit !=303 ){
            alert("托盘类型与出库口号冲突！");
            return;
        }
        if(type=="2" && exit !=312 && exit !=313 ){
            alert("托盘类型与出库口号冲突！");
            return;
        }
        //控制按钮多次点击
        var btn = document.getElementById('submitbut');//首先需要获取的是哪一个按钮的id
        btn.disabled = 'disabled';//只要点击就将按钮的可点击的状态更改为不可以点击的状态
        setTimeout(function () {//设置时间，多久可以改变状态为可以点击
            btn.disabled = '';
        }, 5000);

        $.post("/rf/ktp/KTP_out", {
            type : type,
            quantity:quantity,
            exit : exit
        }, function (result) {
            alert(result.msg);
            window.location.reload();
        }, "json");
    }


</script>
</html>